<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="container" >
    <ul id="list">
        <li>大一</li>
        <li id="er">大二</li>
        <li id="three">大三</li>
        <li>大四</li>
        <li>大五</li>
    </ul>
    <button type="button" onclick="replaceNode()">点击替换节点</button>
</div>
<script type="text/javascript">
    function replaceNode(){
        // 1、要替换的节点
        let replace = document.querySelector("#three");
        // 2、 替换成什么东西，必须是一个节点
        // 2.1 创建一个div 元素（因为元素也是节点）
        let div = document.createElement("div");
        div.innerHTML = "新建节点";// 2.2 指定div中的内容，否则，div 是空的， 没有任何效果

        // 3、替换
        // 3.1 *找到父元素*
        let fatherNode = document.querySelector("#list") ;
        // replaceChild( 老节点 , 新节点 )
        fatherNode.replaceChild(div ,replace) ;
    }
</script>
</body>
</html>